import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'

export default class Header extends Component {

    inpRef = React.createRef()

    handKeyUp = (e) => {
        const {keyCode, target} = e
        if (keyCode !== 13) return
        if (!target.value.trim()) {
            target.value = null
            window.confirm('输入内容不能为空！')
        }else {
            let todoTask = {
                id: nanoid(),
                task: target.value,
                haveDone: false
            }
            console.log('-------', this.props);
            console.log('-------', todoTask);
            this.props.getData.getToDoTask(todoTask)
            target.value = null
        }
    }

    addToDoTask = () => {
        if (!this.inpRef.current.value.trim()) {
            this.inpRef.current.value = null
            window.confirm('输入内容不能为空！')
        }else {
            let todoTask = {
                id: nanoid(),
                task: this.inpRef.current.value,
                haveDone: false
            }
            console.log('-------', this.props);
            console.log('-------', todoTask);
            this.props.getData.getToDoTask(todoTask)
            this.inpRef.current.value = null
        }
    }

    render() {
        return (
            <div className="headerBox">
                <input ref={this.inpRef} onKeyUp={this.handKeyUp} type="text" placeholder="点击按钮或按下回车键添加任务" className="inp"/>
                <button className="addBtn" onClick={this.addToDoTask}>添加任务</button>
            </div>
        )
    }
}
